<template>
  <view class="container">
    <!-- 优惠券列表 -->
    <view class="coupon-list">
      <view 
        class="coupon-item" 
        v-for="item in couponList" 
        :key="item.id"
        :class="{ disabled: item.status === 'used' || item.status === 'expired' }"
      >
        <view class="left">
          <view class="amount">
            <text class="symbol">¥</text>
            <text class="number">{{ item.amount }}</text>
          </view>
          <view class="condition">满{{ item.minAmount }}可用</view>
        </view>
        
        <view class="right">
          <view class="name">{{ item.name }}</view>
          <view class="time">{{ item.startTime }} - {{ item.endTime }}</view>
          <view class="status" v-if="item.status !== 'unused'">
            {{ item.status === 'used' ? '已使用' : '已过期' }}
          </view>
        </view>
      </view>

      <!-- 空状态 -->
      <view class="empty" v-if="couponList.length === 0">
        <image src="/static/empty-coupon.png" mode="aspectFit" />
        <text>暂无优惠券</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// 响应式数据
const couponList = ref([]);

// 获取优惠券列表
const getCouponList = async () => {
  try {
    const res = await uni.$api.coupon.getCouponList();
    if (res.success) {
      couponList.value = res.data;
    }
  } catch (error) {
    console.error('获取优惠券列表失败:', error);
  }
};

// 生命周期
onMounted(() => {
  getCouponList();
});
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  background-color: #f8f8f8;
  padding: 20rpx;
}

.coupon-list {
  .coupon-item {
    display: flex;
    background-color: #fff;
    border-radius: 12rpx;
    margin-bottom: 20rpx;
    position: relative;
    overflow: hidden;
    
    &.disabled {
      opacity: 0.6;
      
      &::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(255,255,255,0.4);
      }
    }
    
    .left {
      width: 220rpx;
      background-color: #ff4444;
      color: #fff;
      padding: 30rpx 20rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      
      &::after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 20rpx;
        background: radial-gradient(circle at right, transparent 0, transparent 10rpx, #fff 10rpx);
        background-size: 20rpx 40rpx;
        background-repeat: repeat-y;
      }
      
      .amount {
        display: flex;
        align-items: baseline;
        
        .symbol {
          font-size: 32rpx;
        }
        
        .number {
          font-size: 60rpx;
          font-weight: bold;
          margin-left: 4rpx;
        }
      }
      
      .condition {
        font-size: 24rpx;
        margin-top: 10rpx;
      }
    }
    
    .right {
      flex: 1;
      padding: 30rpx;
      position: relative;
      
      .name {
        font-size: 28rpx;
        color: #333;
        margin-bottom: 16rpx;
      }
      
      .time {
        font-size: 24rpx;
        color: #999;
      }
      
      .status {
        position: absolute;
        right: 30rpx;
        top: 50%;
        transform: translateY(-50%);
        font-size: 28rpx;
        color: #999;
      }
    }
  }
  
  .empty {
    padding: 100rpx 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    
    image {
      width: 200rpx;
      height: 200rpx;
      margin-bottom: 20rpx;
    }
    
    text {
      font-size: 28rpx;
      color: #999;
    }
  }
}
</style> 